<script setup>
import { use } from 'echarts/core'
import { PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { TitleComponent, TooltipComponent } from 'echarts/components'
import VChart from 'vue-echarts'

use([PieChart, CanvasRenderer, TitleComponent, TooltipComponent])

const props = defineProps({
  title: String,
  value: Number
})

const option = {
  title: {
    text: props.title,
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [{
    type: 'pie',
    radius: '70%',
    data: [
      { value: props.value, name: '已使用' },
      { value: 100 - props.value, name: '剩余' }
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}
</script>

<template>
  <div class="chart-container">
    <v-chart :option="option" autoresize />
  </div>
</template>

<style>
.chart-container {
  height: 300px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
</style>
